<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<script type="text/javascript" src="<s:url value="/js/jquery/jquery.collapse.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/commitment.js"/>"></script>

<style>
    #formCountry tr td{
        background: #F9F8E9;
    }
</style>

<div id="filter"  class="tableFilter">

    <div id="table_content">
    <table>
        <thead>
        <tr>
            <th>Country</th>
            <th>Tgt Pts Enrolled</th>
            <th>Tgt Pts Randomized</th>
            <th>Planned LPFV</th>
            <th>Planned LPLV</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <s:iterator value="listaCargados" var="prot">
            <tr>
                <th><s:property value="%{#prot.compromisopais.country}"/></th>
                <s:if test="%{#prot.enrolledPatients.isEmpty()}">
                    <th></th>
                    <th></th>
                </s:if>
                <s:else>
                    <s:iterator value="#prot.enrolledPatients" var="e" status="epstatus">
                        <s:if test="#epstatus.last == true">
                            <th><s:property value="%{#e.targetEnrolledAmount}"/></th>
                            <th><s:property value="%{#e.targetEnrolledRandomized}"/></th>
                        </s:if>
                    </s:iterator>
                </s:else>
                <th><s:date name="plannedLpfv" format="dd-MMM-yy" /></th>
                <th><s:date name="plannedLplv" format="dd-MMM-yy" /></th>
                <th>
                    <s:form action="edit">
                        <s:hidden value="%{#prot.protocolo.id}" name="editProtId"/>
                        <s:hidden value="%{#prot.compromisopais.id}" name="editPaisId"/>
                        <img src="<s:url value="/images/edit.png"/>" onclick="$(this).closest('form').submit()" alt="Edit"/>
                    </s:form>
                </th>
            </tr>
        </s:iterator>
        <s:if test="%{globalCommitmentForList != null}">
            <tr>
                <th>Global</th>
                <th><s:property value="%{globalCommitmentForList.tpeEnrolled}"/></th>
                <th><s:property value="%{globalCommitmentForList.tpeRandomized}"/></th>
                <th><s:date name="globalCommitmentForList.plannedLpfv" format="dd-MMM-yy" /></th>
                <th><s:date name="globalCommitmentForList.plannedLplv" format="dd-MMM-yy" /></th>
                <th>
                    <s:form action="edit">
                        <s:hidden value="%{globalCommitmentForList.id}" name="editGlobalId"/>
                        <img src="<s:url value="/images/edit.png"/>" onclick="$(this).closest('form').submit()" alt="Edit"/>
                    </s:form>
                </th>
            </tr>
        </s:if>
        </tbody>
    </table>
</div>

    <s:form id="form"  cssClass="tableEdit2" style="margin-top: 10%" >
        <tr>
            <th colspan="2" class="tableTitle">
                <h5>Commitment</h5>
            </th>
        </tr>
    </s:form>

<s:form id="formHidden" action="main">
    <s:hidden name="countryId" id="country"></s:hidden>
</s:form>

<s:form id="formCountry" action="changeToGlobal" cssClass="tableEdit2">

    <s:if test="%{protocoloAEditar == null && globalCommitment == null }">
        <s:select label="Country" name="protocoloAEditar.compromisopais.id" id="pais" value="%{protocoloAEditar.compromisopais.id}"
                      headerKey="" headerValue="Choose Country"
                      list="paisList"
                      listKey="id"
                      listValue="country"
                      onchange="isGlobalCommitment(this)">
        </s:select>
    </s:if>
    <s:else>
        <s:if test="%{protocoloAEditar != null}">
            <s:textfield label="Country" id="pais" value="%{protocoloAEditar.compromisopais.country}" disabled="true"/>
            <s:hidden value="%{protocoloAEditar.compromisopais.id}" name="protocoloAEditar.compromisopais.id"/>
        </s:if>
        <s:else>
            <s:textfield label="Country" value="Global" disabled="true"/>
        </s:else>
    </s:else>

    <s:hidden value="%{protocoloAEditar.protocolo.id}" name="protocoloAEditar.protocolo.id"/>
    <s:hidden value="%{globalCommitment.id}" name="globalCommitment.id" />

    <tr>
        <td colspan="3" id="errores" class="tdError"><label style="color: #FF0000; padding-left: 10%" id="error"></label></td>
    </tr>

    <s:if test="%{globalCommitment == null}">
    <tr>
        <td colspan="2">
            <div id="objectives-show-hide" class="collapseSeparacion">
                <h2>Team Objectives</h2>
                <div style="width:400px">
                    <table id="table_objectives" class="tableEditFixed" style="width:100%; margin:0px">
                        <col widht="200px" />
                        <col widht="150px" />
                        <s:if test="%{protocoloAEditar == null || protocoloAEditar.objetivos.isEmpty() == true}">
                            <tr id="hub"><td><label>Year:</label></td>
                                <td>
                                    <s:select id="hubField0" theme="simple" name="protocoloAEditar.objetivos[0].fecha" cssClass="yearObj"
                                              headerKey="" headerValue="Choose Year" list="yearList"/>
                                <%--<s:textfield id="hubField0" theme="simple" name="protocoloAEditar.objetivos[0].fecha" cssClass="datepicker"/>--%>
                                </td>
                            </tr>
                            <tr id="descr"><td><label>Description:</label></td><td><s:textarea id="descrField0" theme="simple" name="protocoloAEditar.objetivos[0].objetivo" style="height:60px"/></td></tr>
                            <tr id="delObj0" class="trEspacioAbajo">
                                <td>
                                    <s:hidden></s:hidden>
                                </td>
                                <td id="delObjCell0" align="right"><a onclick="deleteObjective('table_objectives', $(this).closest('tr'))"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>
                            </tr>
                            <s:hidden id="cantObjetivos" value="1" />
                            <s:hidden id="ultimoIdObjetivos" value="0" />
                        </s:if>
                        <s:else>
                            <s:iterator value="%{protocoloAEditar.objetivos}" var="obj" status="stat">
                                <s:hidden value="%{#obj.id}" name="protocoloAEditar.objetivos[%{#stat.index}].id"/>
                                <tr id="hub"><td><label>Year:</label></td>
                                    <td>
                                        <s:select id="hubField%{#stat.index}" theme="simple" value="%{#obj.fecha}"
                                                  name="protocoloAEditar.objetivos[%{#stat.index}].fecha" cssClass="yearObj"
                                                  headerKey="" headerValue="Choose Year" list="yearList"/>
                                        <%--<s:textfield id="hubField%{#stat.index}" theme="simple" value="%{#obj.fecha}" name="protocoloAEditar.objetivos[%{#stat.index}].fecha" cssClass="datepicker"/>--%>
                                    </td>
                                </tr>
                                <tr id="descr"><td><label>Description:</label></td><td><s:textarea id="descrField%{#stat.index}" theme="simple" label="Description" value="%{#obj.objetivo}" name="protocoloAEditar.objetivos[%{#stat.index}].objetivo" style="height:60px" /></td></tr>
                                <tr id="delObj0" class="trEspacioAbajo">
                                    <td>
                                        <s:hidden></s:hidden>
                                    </td>
                                    <td id="delObjCell<s:property value="%{#stat.index}"/>" align="right"><a onclick="deleteObjective('table_objectives', $(this).closest('tr'))"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>
                                </tr>
                            </s:iterator>
                            <s:hidden id="cantObjetivos" value="%{protocoloAEditar.objetivos.size()}" />
                            <s:hidden id="ultimoIdObjetivos" value="%{protocoloAEditar.objetivos.size() - 1}" />
                        </s:else>
                        <tr>
                            <th>
                                <s:hidden></s:hidden>
                            </th>
                            <th align="right"><a onclick="addObjective('table_objectives')"><img src="<s:url value="/images/add2.png"/>" alt="Add Objective"></a></th>
                        </tr>
                    </table>
                </div>
            </div>
        </td>
    </tr>

    <tr>
        <td colspan="2">
            <div id="TPE-show-hide" class="collapseSeparacion">
                <h2>Patients Commitment</h2>
                <div style="width:400px">
                    <table id="table_tpe" class="tableEditFixed" style="width:100%; margin:0px">
                        <col widht="200px" />
                        <col widht="150px" />

                        <tr id="tpeDateBase">
                            <td>
                                <label>Date of new commitment:</label>
                            </td>
                            <td>
                                <%--<s:textfield id="tpeCellDate1" theme="simple" name="protocoloAEditar.enrolledPatients[0].targetEnrolledDate" cssClass="datepicker"/>--%>
                                <s:textfield theme="simple" cssClass="datepicker"/>
                                <s:hidden />
                            </td>
                        </tr>
                        <tr  id="tpeCategoryBase" >
                            <td>
                                <label>Category:</label>
                            </td>
                            <td>
                                <s:select headerKey="-1" headerValue=""
                                          listKey="id" listValue="description" list="categories"
                                          theme="simple"/>
                            </td>
                        </tr>

                        <tr id="tpeCommentBase" class="trEspacioAbajo">
                            <td>
                                <label>Reason for the change:</label>
                            </td>
                            <td>
                                <%--<s:textarea id="tpeCellComment1" theme="simple" name="protocoloAEditar.enrolledPatients[0].comment" cssClass="bigInput"/>--%>
                                <s:textarea theme="simple" style="height:60px" />
                            </td>
                        </tr>

                        <s:if test="%{protocoloAEditar == null || protocoloAEditar.enrolledPatients.isEmpty() == true}">
                            <tr id="tpe">
                                <td>
                                    <label>1° Target Pts Enrolled (RIPET):</label>
                                </td>
                                <td>
                                    <s:textfield id="tpeCell1" theme="simple" name="protocoloAEditar.enrolledPatients[0].targetEnrolledAmount" cssClass="numberClass"/>
                                </td>
                            </tr>
                            <tr id="tpeRand" class="trEspacioAbajo">
                                <td>
                                    <label>1° Target Pts Randomized (RIPET):</label>
                                </td>
                                <td>
                                    <s:textfield id="tpeCellRand1" theme="simple" name="protocoloAEditar.enrolledPatients[0].targetEnrolledRandomized" cssClass="numberClass"/>
                                </td>
                            </tr>
                            <s:hidden id="cantTpe" value="1" />
                        </s:if>
                        <s:else>
                            <s:iterator value="%{protocoloAEditar.enrolledPatients}" var="ep" status="stat">
                                <s:hidden value="%{#ep.id}" name="protocoloAEditar.enrolledPatients[%{#stat.index}].id"/>
                                <tr id="tpe">
                                    <td>
                                        <label><s:property value="patientOrder"/>° Target Pts Enrolled<s:if test="#stat.first == false"> (RIPET)</s:if>:</label>
                                    </td>
                                    <td>
                                        <s:textfield id="tpeCell%{#stat.index + 1}" theme="simple" value="%{#ep.targetEnrolledAmount}" name="protocoloAEditar.enrolledPatients[%{#stat.index}].targetEnrolledAmount" cssClass="numberClass"/>
                                    </td>
                                </tr>
                                <s:if test="#stat.first == true">
                                    <tr id="tpeRand" class="trEspacioAbajo">
                                </s:if>
                                <s:else>
                                    <tr id="tpeRand">
                                </s:else>
                                    <td>
                                        <label><s:property value="patientOrder"/>° Target Pts Randomized<s:if test="#stat.first == false"> (RIPET)</s:if>:</label>
                                    </td>
                                    <td>
                                        <s:textfield id="tpeCellRand%{#stat.index + 1}" theme="simple" value="%{#ep.targetEnrolledRandomized}" name="protocoloAEditar.enrolledPatients[%{#stat.index}].targetEnrolledRandomized" cssClass="numberClass"/>
                                    </td>
                                </tr>
                                <s:if test="#stat.first == false">
                                    <tr id="tpeDate">
                                        <td>
                                            <label>Date of new commitment:</label>
                                        </td>
                                        <td>
                                            <s:hidden name="protocoloAEditar.enrolledPatients[%{#stat.index}].targetEnrolledDate" id="alttpeCellDate%{#stat.index + 1}" value="%{#ep.targetEnrolledDate}"/>
                                            <s:textfield theme="simple" id="tpeCellDate%{#stat.index + 1}" cssClass="datepicker"/>
                                        </td>
                                    </tr>
                                    <tr  id="tpeCategory" >
                                        <td>
                                            <label>Category:</label>
                                        </td>
                                        <td>
                                            <s:select id="tpeCellCategory%{#stat.index + 1}" name="protocoloAEditar.enrolledPatients[%{#stat.index}].category"
                                                      headerKey="-1" headerValue=""
                                                      listKey="id" listValue="description" list="categories"
                                                      value="%{#ep.category.id}"
                                                      theme="simple"/>
                                        </td>
                                    </tr>
                                    <tr id="tpeComment" class="trEspacioAbajo">
                                        <td>
                                            <label>Reason for the change:</label>
                                        </td>
                                        <td>
                                            <s:textarea id="tpeCellComment%{#stat.index + 1}" theme="simple" value="%{#ep.comment}" name="protocoloAEditar.enrolledPatients[%{#stat.index}].comment" style="height:60px"/>
                                        </td>
                                    </tr>
                                </s:if>
                            </s:iterator>
                            <s:hidden id="cantTpe" value="%{protocoloAEditar.enrolledPatients.size()}" />
                        </s:else>
                        <tr>
                            <th>
                                <s:hidden></s:hidden>
                            </th>
                            <th align="right"><a onclick="deleteTpe('table_tpe')"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></th>
                        </tr>
                        <tr>
                            <th>
                                <s:hidden></s:hidden>
                            </th>
                            <th align="right"><a onclick="addTpe('table_tpe');updateDatepickers()"><img src="<s:url value="/images/add2.png"/>" alt="Add Tpe"></a></th>
                        </tr>
                    </table>
                </div>
            </div>
        </td>
    </tr>
    <tr><div id="div_fpfv">Read only</div></tr>

    <tr>
    <td colspan="2">
    <div id="visits-show-hide" class="collapseSeparacion">
        <h2>Target Planned Dates</h2>
        <div style="width:400px">
            <table class="tableEditFixed" style="width:100%; margin:0px">
               <tr>
                   <td><label label style="display: inline">Planned FPFV: </label><img class="imgInfoFpfv" src="<s:url value="/images/info.png"/>"/></td>
                   <td>
                       <s:textfield disabled="true" theme="simple" id="fpfv" cssClass="datepicker"/>
                       <s:hidden name="protocoloAEditar.plannedFpfv" id="altfpfv" value="%{protocoloAEditar.plannedFpfv}"/>
                   </td>
               </tr>

               <s:hidden name="protocoloAEditar.plannedLpfv" id="altlpfv" value="%{protocoloAEditar.plannedLpfv}"/>
               <s:textfield label="Planned LPFV" id="lpfv" cssClass="datepicker"/>

                <s:hidden name="protocoloAEditar.plannedLplv" id="altlplv" value="%{protocoloAEditar.plannedLplv}"/>
                <s:textfield label="Planned LPLV" id="lplv" cssClass="datepicker"/>

            </table>
        </div>
    </div>
    </td>
    </tr>
    </s:if>
    <s:else>
        <tr>
            <td colspan="2">
                <div id="TPE-show-hide" class="collapseSeparacion">
                    <h2>Patients Commitment</h2>
                    <div style="width:400px">
                        <table id="table_tpe" class="tableEditFixed" style="width:100%; margin:0px">
                            <col widht="200px" />
                            <col widht="150px" />

                            <tr>
                                <td>
                                    <label>Target Pts Enrolled:</label>
                                </td>
                                <td>
                                    <s:textfield theme="simple" name="globalCommitment.tpeEnrolled" cssClass="numberClass"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>Target Pts Randomized:</label>
                                </td>
                                <td>
                                    <s:textfield theme="simple" name="globalCommitment.tpeRandomized" cssClass="numberClass"/>
                                    </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <div id="visits-show-hide" class="collapseSeparacion">
                    <h2>Target Planned Dates</h2>
                    <div style="width:400px">
                        <table class="tableEditFixed" style="width:100%; margin:0px">
                            <s:hidden name="globalCommitment.plannedFpfv" id="altfpfv" value="%{globalCommitment.plannedFpfv}"/>
                            <s:textfield label="Planned FPFV" id="fpfv" cssClass="datepicker"/>

                            <s:hidden name="globalCommitment.plannedLpfv" id="altlpfv" value="%{globalCommitment.plannedLpfv}"/>
                            <s:textfield label="Planned LPFV" id="lpfv" cssClass="datepicker"/>

                            <s:hidden name="globalCommitment.plannedLplv" id="altlplv" value="%{globalCommitment.plannedLplv}"/>
                            <s:textfield label="Planned LPLV" id="lplv" cssClass="datepicker"/>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </s:else>



    <s:if test="%{protocoloAEditar != null}">
        <script type="text/javascript">
            var ids=new Array();
            ids[0] =  ["visits-show-hide",false];
            ids[1] =  ["objectives-show-hide",false];
            ids[2] =  ["TPE-show-hide",false];
            loadCollapse(ids);
        </script>
    </s:if>
    <s:else>
        <script type="text/javascript">
            var ids=new Array();
            ids[0] =  ["visits-show-hide",true];
            ids[1] =  ["objectives-show-hide",true];
            ids[2] =  ["TPE-show-hide",true];
            loadCollapse(ids);
        </script>
    </s:else>

    <tr>
        <td colspan="2" class="centeredButtons" >
            <s:if test="%{globalCommitment == null}">
                <s:submit value="Save" id="save" action="save" onclick="return validate();" theme="simple"/>
            </s:if>
            <s:else>
                <s:submit value="Save" id="save" action="save" onclick="return validateGlobal();" theme="simple"/>
            </s:else>
        <s:submit value="New" id="new" action="clean" theme="simple"/></td>
    </tr>
</s:form>
       </div>
<script type="text/javascript">
    $('#countryCommitment').css({"color":"#EE5102","fontWeight":"bold"});
</script>
